<template>
    <div>
        <div>
            <el-table :data="tableData"
                      border
                      style="width: 100%;height: calc( 100vh - 180px )">
                <el-table-column label="昵称" prop="nickName"  width="240px"></el-table-column>
                <el-table-column label="头像"
                width="180px" align="center">
                    <template slot-scope="scope">
                        <el-image  style="width: 50px;height: 50px" :src="scope.row.avatarUrl"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="性别"
                                 width="180px" align="center">
                    <template slot-scope="scope">
                       <span >{{scope.row.gender==1?'男':'女'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员"
                                 width="180px" align="center">
                    <template slot-scope="scope">
                        <span >{{scope.row.hasVis?'是':'否'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态"
                                 width="180px" align="center">
                    <template slot-scope="scope">
                        <span >{{scope.row.del==0?'正常':'封禁'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="邮箱" prop="iphone"></el-table-column>
                <el-table-column label="上传登录" prop="loginDate"></el-table-column>
                <el-table-column
                        align="center"
                        label="操作" width="180">
                    <template slot-scope="scope" >
                        <el-button v-if="scope.row.del==0" @click="handledelete(scope,1)" style="color: #ff0000;"  type="text" size="small">禁用用户</el-button>
                        <el-button v-else style="color: #ff0000;" @click="handledelete(scope,0)"  type="text" size="small">解禁用户</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="background-color: white">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[15, 20, 25, 30]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import userApi from "../../api/userApi";

    export default {
        name: "userManager",
        data() {
            return {
                tableData: [],
                page:1,
                size:15,
                total:1
            }
        },
        methods:{
            handledelete(scope,del){
                userApi.update({
                    id: scope.row.id,
                    del:del
                }).then(res=>{
                    scope.row.del=del
                })
            },
            query(){
                userApi.query({},this.page,this.size).then(res=>{
                    this.tableData=res.data.rows
                    this.total=res.data.total
                })
            },            // 尺寸大小改变
            handleSizeChange(newSize) {
                this.size = newSize;
                this.query();
            },
            // 当前页码的改变
            handleCurrentChange(newPage) {
                this.page = newPage;
                this.query();
            }
        },
        mounted() {
            this.query()
        }
    }
</script>

<style scoped>

</style>